<template>
  <div class="settings">
    <basic-container>
      <avue-tabs :option="option" @change="handleChange"></avue-tabs>
      <ScaleInfo
        v-if="type.prop === 'scaleInfo'"
        :gaugeId="gaugeId"
      ></ScaleInfo>
      <FactorRule
        v-if="type.prop === 'factorRule'"
        :gaugeId="gaugeId"
      ></FactorRule>
      <ScaleModifiy
        v-if="type.prop === 'scaleModifiy'"
        :gaugeId="gaugeId"
      ></ScaleModifiy>
    </basic-container>
  </div>
</template>

<script>
import ScaleInfo from "./scale-info.vue";
import ScaleModifiy from "./scale-modifiy.vue";
import FactorRule from "./factor-rule.vue";

export default {
  name: "Settings",
  components: {
    ScaleInfo,
    ScaleModifiy,
    FactorRule,
  },
  // props: {
  //   gaugeId: {
  //     type: String,
  //     default: ""
  //   }
  // },
  data() {
    return {
      type: {},
      // option: {
      //   column: [
      //     {
      //       icon: "el-icon-info",
      //       label: "量表信息",
      //       prop: "scaleInfo"
      //     },
      //     // {
      //     //   icon: "el-icon-warning",
      //     //   label: "添加题目",
      //     //   prop: "addQuestion"
      //     // },
      //     // {
      //     //   icon: "el-icon-question",
      //     //   label: "添加选项",
      //     //   prop: "addOption"
      //     // },
      //     // {
      //     //   icon: "el-icon-question",
      //     //   label: "计分评价",
      //     //   prop: "scoreEvaluation"
      //     // },
      //     {
      //       icon: "el-icon-question",
      //       label: "因子规则",
      //       prop: "factorRule"
      //     },
      //     {
      //       icon: "el-icon-question",
      //       label: "量表修改",
      //       prop: "scaleModifiy"
      //     }
      //   ]
      // }
    };
  },
  computed: {
    gaugeId() {
      return this.$route.query.gaugeId;
    },
    editMode() {
      return !!this.gaugeId;
    },
    option() {
      const option = {
        column: [
          {
            icon: "el-icon-info",
            label: "量表信息",
            prop: "scaleInfo",
          },
        ],
      };
      if (this.editMode) {
        option.column.push(
          ...[
            {
              icon: "el-icon-question",
              label: "因子规则",
              prop: "factorRule",
            },
            {
              icon: "el-icon-question",
              label: "量表试题",
              prop: "scaleModifiy",
            },
          ]
        );
      }
      return option;
    },
  },
  created() {
    this.type = this.option.column[0];
  },
  methods: {
    handleChange(column) {
      this.type = column;
    },
  },
};
</script>

<style lang="scss" scoped>
.settings {
}
</style>
